
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基本用法</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        button { margin: 15px; width: 250px; height: 250px; font-size: 30px;}
        .container { margin: 15px; border: 1px solid green; min-height: 10px ; }
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <div id="application">
        <div>
            <input type="text" v-model="surname" >
            <p>{{ surname }}</p>
        </div>
        <hr>
        <!-- 3、使用自定义组件 -->
        <kaifamiao-counter></kaifamiao-counter>
        <hr>
        <kaifamiao-container></kaifamiao-container>
    </div>

    <!-- 导入 vue.js 3.x 核心库 -->
    <script src="vue.global.js"></script>

    <!-- 编写自己的代码 -->
    <script>
    (function(){

        const options = {
            data(){
                return {
                    surname: ''
                }
            }
        }

        const app = Vue.createApp(options);
        console.log(app);

        // 1、定义组件
        const counter = {
            template: `<button @click="handler">{{ value }}</button>`,
            data(){
                return {
                    value: 250
                }
            },
            methods: {
                handler(evt){
                    this.value++;
                    console.log( 'parent: ' , this.$parent === root );
                    console.log( 'root: ' , this.$root === root );
                }
            }
        }

        const container = {
            template: `<div class="container">
                          <!-- 使用全局注册的其它组件 -->
                          <kaifamiao-counter></kaifamiao-counter>
                       </div>`
        }

        // 2、注册组件 (全局注册)
        // app.component( name , component );
        app.component( 'kaifamiao-counter' , counter );
        app.component( 'kaifamiao-container' , container );

        const root = app.mount('#application');
        console.log(root);
    })();
    </script>

    
</body>
</html>